<template>
    <div class="base-chart" :id="echartsId" :style="$attrs.chartStyle"></div>
</template>

<script>
import { v4 as uuid } from 'uuid'
import echarts from 'echarts'

export default {
    props: {
        option: {
            type: Object
        },
        chartStyle: {
            type: Object
        }
    },
    data(){
        return {
            echartsId: uuid(),
            instance: null
        }
    },
    watch: {
        option: {
            deep: true,
            immediate: true,
            handler(){
                this.init()
            }
        }
    },
    methods: {
        init(){
            this.$nextTick(() => {
                this.instance.setOption(this.option)
            })
        }
    },
    mounted(){
        window.addEventListener('resize', () => {
            this.instance && this.instance.resize()
        })

        const dom = document.getElementById(this.echartsId)
        this.instance = echarts.init(dom)
    }
}
</script>

<style scoped>
.base-chart{
    width: 600px;
    height: 450px;
}
</style>